<template>
  <div style="width: 100%">
    <el-tag
      style="margin-right: 4px"
      v-for="(item, i) in props.list"
      :key="i"
      :closable="!props.disabled"
      type="info"
      @close="handleClose(item)"
    >
      <span v-if="item.communityName.length < 30">
        {{ item.communityName }}</span
      >
      <el-tooltip
        v-else
        class="box-item"
        effect="dark"
        :content="item.communityName"
        placement="top"
      >
        <span class="text_ellipsis">{{ item.communityName }}</span>
      </el-tooltip>
    </el-tag>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  list: { type: Object },
  disabled: {
    type: Boolean,
    default: false,
  },
})
const emit = defineEmits(['update:list'])
const handleClose = (e) => {
  let arr = props.list.filter((x) => x.communityId !== e.communityId)
  emit('update:list', arr)
}
</script>

<style scoped></style>
